1
<template>
  <div class="box">
    <MapcompVue style="height: 100vh;"></MapcompVue>
    <div class="Rback">
      <van-button icon="arrow-left" type="primary" color="aqua" round size="small" @click="Roback"/>
    </div>
    <div class="call">
      <p class="onepo">
        距离<span style="color: #e06883">&nbsp;342&nbsp;</span>米
      </p>
      <div class="labelonemain">
        <img src="@/img/骑手图片/u6826.png" alt="" />
        <div>
          <p class="Labtitle">赵师傅<span>已完成&nbsp;9999&nbsp;单</span></p>
          <p class="Labtitle1">13255486659</p>
          <van-tag mark type="primary">诚信</van-tag>&emsp;
          <van-tag mark type="danger ">服务好</van-tag>
        </div>
      </div>
      <div class="mesg">
        <p>回收小哥正在赶来的路上，请保持电话畅通哦~</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import MapcompVue from "../../components/Mapcomp.vue";
import { useRouter } from "vue-router";
const Router =useRouter()

const Roback =()=>{
  Router.back()
}
</script>

<style lang="less" scoped>
.box {
  background-color: pink;
  width: 100vw;
  height: 100vh;
  position: relative;
  .Rback{
    position: absolute;
    top: 1.333vw;
    left: 1.333vw;
    z-index: 999;
  }
  .call {
    z-index: 99;
    background-color:white;
    width: 90vw;
    height: 40vw;
    position: absolute;
    bottom: 30vw;
    margin-left: 5vw;
    border-radius: 3vw;
    box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
    .mesg {
      width: 80vw;
      height: 10vw;
      background-color: white;
      margin-top: 10vw;
      box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
      border-radius: 3vw 3vw 0 3vw;
      color: #ccc;
      font-size: 3.367vw;
      line-height: 10vw;
      text-indent: 5vw;
    }
    .onepo {
      margin-left: 8vw;
      padding: 3vw;
      font-weight: bolder;
    }
    .labelonemain {
      display: flex;
      margin-left: 8vw;
      margin-bottom: 8vw;
      img {
        width: 22.667vw;
        height: 22.667vw;
      }
      div {
        margin-left: 5vw;
        font-size: 14px;
        .Labtitle {
          font-weight: bolder;
          font-size: 18px;
          margin-bottom: 4vw;
          position: relative;
          span {
            color: #ccc;
            font-size: 2vw;
            position: absolute;
            right: -25vw;
            top: 1vw;
          }
        }
        .Labtitle1 {
          margin-bottom: 4vw;
        }
      }
    }
  }
}
</style>
